/** 
    经营概况中间  收入情况  近一周  或者 最近一个月
 */

<template>

    <div>

        <div style="width:1100px">
            <span style="font-weight:800">诊所收入趋势</span>
            <hr>
        </div>

        <div class="Echarts">
            <div id="main" style="width: 1100px;height:400px;"></div>
        </div>
    </div>
</template>
<script>
import axios from "axios";
import echarts from "echarts";
export default {
    data(){
        return{
            xDateInfo:[],
            yDateInfo:[],
        }
    },
    methods:{
        myEcharts(){
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            var option = {
                //标题
                title:{
                text:''
                },
                //工具箱
                //保存图片
                toolbox:{
                    show:true,
                    feature:{
                        saveAsImage:{
                            show:true
                        }
                    }
                },
                //图例-每一条数据的名字叫销量
                legend:{
                    data:['收入(元)']
                },
                //x轴
                xAxis:{
                    // data:["苹果","橘子","橙子","香蕉","菠萝","榴莲"]
                    data:this.xDateInfo
                },
                //y轴没有显式设置，根据值自动生成y轴
                yAxis:{},
                //数据-data是最终要显示的数据
                series:[{
                    name:'收入(元)',
                    type:'line',
                    // data:[40,20,35,60,55,10]
                    data:this.yDateInfo
                }]
		    };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
		},
        getIncomeInfo(){
            axios("/api/income/findMonthIncome")
            .then((res) => {
                let xData = new Array(30);
                let yData = new Array(30);
                let incomeInfoList = res.data.data;
                for(let j = 0 ; j <incomeInfoList.length; j++) {
                    let date = new Date(incomeInfoList[incomeInfoList.length-j-1].time)
                    xData[j] = (date.getMonth()+1) + "-" + date.getDate();
                    yData[j] = incomeInfoList[incomeInfoList.length-j-1].sumfee;
                }
                // console.log( xData)
                this.xDateInfo = xData;
                this.yDateInfo = yData;
                // console.log("xData",xData[0]);
                // console.log("yData",yData[0]);
                this.myEcharts();
            })
            .catch((err) =>{
                // alert("请求错误,请联系我们的管理员~~~");
                // console.log('err',err);
                this.$message.error('请求错误,请联系我们的管理员~~~')
            });
        }

    },
    components:{

    },

    created(){
       this.getIncomeInfo();
    },
    mounted(){
        
        // this.myEcharts();
    }
    
    
}
</script>